<script setup lang="ts">
import { ref } from "vue"
import logn from "./components/Logn.vue"

// 正确用户信息
const User = {
  userName: "Tuski",
  userPassword: "123456"
}

const userName = ref('')
const userPassword = ref('')
const tipText = ref('')
const flag = ref(false)

const isLogin = ref(false)

function logn_btn() {
  if (userName.value == User.userName && userPassword.value === User.userPassword) {
    flag.value = true
    isLogin.value = true
    tipText.value = "用户信息正确！正在跳转页面..."
  } else {
    flag.value = true
    tipText.value = "用户信息错误！！"
  }
}

function Logout() {
  console.log("父组件方法被调用")
  userName.value = ''
  userPassword.value = ''
  tipText.value = ''
  isLogin.value = false
}
</script>

<template>
  <div id="logn_box">
    <h2>用户登录</h2>
    <div>用户名：<input id="username" type="text" placeholder="请输入用户名" v-model="userName"></input></div>
    <br>
    <div>密码：<input id="userpassword" type="password" placeholder="请输入密码" v-model="userPassword"></input></div>
    <br>
    <button id="logn" @click="logn_btn">登录</button>
    <div class="tip-box" v-show="flag">{{ tipText }}</div>

    <logn v-if="isLogin" :userName="userName" @logout="Logout"></logn>
  </div>
</template>

<style scoped>
#logn_box {
  width: 350px;
  margin: 50px auto;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 10px #eee;
  font-family: Arial, sans-serif;
}

#logn_box h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

#user_name,
#user_pwd {
  width: 100%;
  padding: 10px;
  margin: 8px 0 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

#user_name:focus,
#user_pwd:focus {
  border-color: #4299e1;
}

#logn {
  width: 100%;
  padding: 10px;
  background: #4299e1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#logn:hover {
  background: #3182ce;
}
</style>
